<template>
  <van-loading v-if="loading" size="0.5rem"/>
  <van-icon
    v-else
    :color="value ? '#f7a306' : '#777'"
    :name="value ? 'star' : 'star-o'"
    @click="onCollect"
  />
</template>

<script>

// 核心思路
// 1. 监听图标的点击事件，并提供事件处理函数
// 2. 在事件处理函数中判断是否已收藏
// 3. 如果是已收藏，就要利用id调取消收藏接口
// 4. 如果是未收藏，就用利用id调收藏的接口
// 5. 实现图标的动态切换
import { deleteCollect, addCollect } from '@/api/article'

export default {
  name: 'CollectArticle',
  props: {
    value: {
      // 文章是否被收藏的状态
      type: Boolean,
      required: true
    },
    id: {
      // 文章的id
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      loading: false // 是否加载中，其实就是互斥锁
    }
  },
  methods: {
    // 1. 监听图标的点击事件，并提供事件处理函数
    async onCollect () {
      try {
        this.loading = true
        // 2. 在事件处理函数中判断是否已收藏
        if (this.value) {
        // 3. 如果是已收藏，就要利用id调取消收藏接口
          await deleteCollect(this.id)
        } else {
        // 4. 如果是未收藏，就用利用id调收藏的接口
          await addCollect(this.id)
        }
        // 5. 子传父，告诉父组件怎样修改article.is_collected
        this.$emit('input', !this.value)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style>
</style>
